<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="编程云">
    <meta name="description" content="编程云">
    <meta name="robots" content="all">
    <meta name="copyright" content="">
    <meta name="author" content="编程云">
    <title>实验云</title>
    <!--<link rel=stylesheet href="css/codemirror.min.css">-->
    <link rel="stylesheet" href="CodeMirror/css/style.css" type="text/css">
    <!--<link href="CodeMirror/addon/hint/show-hint.css" rel="stylesheet">-->
    <link href="CodeMirror/css/bootstrap.min.css" rel="stylesheet">
    <link rel=stylesheet href="css/head.css">
    <link rel="stylesheet" type="text/css" href="CodeMirror/css/mycourse.css">
    <!--<link rel=stylesheet href="CodeMirror/theme/eclipse.css">-->
    <!--<link href="css/video-js.css" rel="stylesheet" type="text/css">-->
    <link href="css/code.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="CodeMirror/js/jquery.min.js"></script>
    <script src="CodeMirror/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.page.js"></script>
    <script src="js/artTemplate.js"></script>
    <script src="js/template-native.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/HOST.js"></script>
    <script src="js/main.js"></script>
    <!--<script register-percent="100" src="js/video.js"></script>-->

    <script type="text/javascript">
        //    alert(document.documentElement.clientHeight);
        window.onload = function () {
            document.getElementById("case1").style.height = document.documentElement.clientHeight - 98 + "px";
            document.getElementById("codeFrame").style.height = document.documentElement.clientHeight - 98 + "px";
        }
    </script>
</head>
<body style="padding: 0">
    <div class="menu">
        <div class="container con_header" style="">
            <nav class="navbar" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#cloud-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div style="width: 40px; height: 40px;">
                            <a class="navbar-brand" href="index.html">
                                <img src="img/logo.png" style="width: 40px; height: 40px;">
                            </a>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse" id="cloud-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <!--<li class="hov"><a href="#">品牌故事</a></li>-->
                            <li class="hov"><a href="courseLibrary.html">课程库</a></li>
                            <!--<li class="hov"><a href="#">关于我们</a></li>-->
                            <!--<li class="hov"><a href="#">编程介绍</a></li>-->
                            <div class="mobile-show isDisplayMb">
                                <li><a href="personalCenter.html">个人信息</a></li>
                                <li><a href="javascript:;" onclick="logOut()">退出登录</a></li>
                            </div>
                            <li class="dropdown head-box isDisplay" >
                                <a href="#" class="head-pic" data-toggle="dropdown">
                                    <img id="userImg" src="img/head_pic.png">
                                    <span id="userName">编程云</span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="personalCenter.html">个人信息</a></li>
                                    <li><a href="javascript:;" onclick="logOut()">退出登录</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="dragbox">
        <div class="result lef" id="a">
            <div class="showresult show1" id="case1" style="border: 0;border-right: 1px solid #ccc">
                <!--<div id="caseContent">课程内容</div>-->
                <div id="caseTop" style="height: 30%;position: relative;">
                    <div class="courseList">
                        <a href="javascript:;" class="menuList">
                            <span id="courseTit" style="line-height: 30px">问题描述</span>
                            <span class="glyphicon glyphicon-fullscreen" id="butt" onclick="fullScr()" style="float: right;margin-top: 7px;margin-right: 5px"></span>
                        </a>
                    </div>
                    <div id="caseContent" style="padding: 10px 5px 5px 5px;">
                        <h4 id="questionTitle" style="font-size: 14px;">问题标题</h4>
                        <div id="questionContent">问题内容</div>
                    </div>
                    <div style="position: absolute;bottom: 0;width: 100%;">
                        <span id="showQuestionCode">查看代码</span>
                    </div>
                </div>
                <div id="caseAnswer" style="height: 65%;">
                    <div id="answerMain" style="height: 10%">
                        <a href="javascript:;" class="menuList">
                            <span id="answerTit" style="line-height: 30px">回答</span>
                        </a>
                    </div>
                    <div id="answerList" style="height: 90%">
                        <ul id="replyList" style="list-style: none;padding-left: 0px;">

                        </ul>
                        <ul class="pagination" style="float: right;margin: 0px;padding: 15px 0">
                        </ul>
                    </div>
                    <script type="text/html" id="reply">
                        <% for (var i = 0; i < value.length; i ++) { %>
                        <li class="item">
                            <div class="answer" style="height: 100px;">
                                <!--头像-->
                                <div style="width: 15%;height: 100%;float: left;text-align: center;">
                                    <img src="img/head_pic.png" height="50px" width="50px">
                                    <span style="display:block;overflow: hidden;"><%= value[i].createBy %></span>
                                </div>
                                <!--内容-->
                                <div style="width: 83%;height: 100%;float: right;position: relative;">
                                    <div style="height: 80%;">
                                        <p class="answerContent" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;line-height: 20px;margin: 0;">
                                            <%= value[i].reason %>
                                        </p>
                                    </div>
                                    <div style="bottom: 0px;">
                                        <span class="openAndClose" style="cursor:pointer;color: #72ACE3;" onclick="openAndClose(this)">展开</span>
                                        <span style="display: none;"><%= value[i].code %></span>
                                        <span style="margin-left: 10px;cursor:pointer;color: #72ACE3;" onclick="showCode(this)">查看代码</span>
                                        <div style="float: right;">
                                            <span><%= value[i].createDate %></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr style="margin: 5px 0 10px 0;"/>
                        </li>
                        <% } %>
                    </script>
                    <script type="text/javascript">
                        function openAndClose(obj) {
                            var tmp = obj;
                            if ($(tmp).text()=="展开"){
                                $(tmp).parent().prev().children().css({
                                    "overflow" :"",
                                    "text-overflow" :"",
                                    "display" :"",
                                    "-webkit-line-clamp" :"",
                                    "-webkit-box-orient" :""
                                });
                                $(tmp).parent().parent().parent().css({
                                    "height": ""
                                });
                                var height = $(tmp).parent().prev().height();
                                height = height / 0.8;
                                if (height > 100){
                                    $(tmp).parent().parent().parent().css({
                                        "height": height
                                    });
                                }else{
                                    $(tmp).parent().parent().parent().css({
                                        "height": 100
                                    });
                                }
                                $(tmp).text("收起");
                            }
                            else {
                                $(tmp).parent().prev().children().css({
                                    "overflow" :"hidden",
                                    "text-overflow" :"ellipsis",
                                    "display" :"-webkit-box",
                                    "-webkit-line-clamp" :"4",
                                    "-webkit-box-orient" :"vertical"
                                });
                                $(tmp).parent().parent().parent().css({
                                    "height":"100px"
                                });
                                $(tmp).text("展开");
                            }
                        }
                        function showCode(obj){
                            var tmp = $(obj).prev().text();
                            alert(tmp);
                        }
                    </script>
                </div>
                <!--<div id="caseExample">-->
                    <!--<div class="">-->
                        <!--<a class="" id="example">-->
                            <!--<span>回答</span>-->
                        <!--</a>-->
                    <!--</div>-->
                    <!--<div id="exampleMain">-->
                        <!--<textarea rows="" cols="" style="width: 100%;height: 100%;padding: 5px;resize:none;"></textarea>-->
                    <!--</div>-->
                <!--</div>-->
                <div style="bottom: 3px;left: 0px;width: 100%;position: absolute;">
                    <textarea rows="1" cols="" placeholder="请输入回答" style="width: 95%;padding: 5px;resize:none;margin:0 0 0 1%;" id="textArea"></textarea>
                </div>
                <script type="text/javascript">
                    $("#textArea").focus(function () {
                        $("#textArea").attr("rows","5");
                    });
                    $("#textArea").blur(function () {
                        $("#textArea").attr("rows","1");
                    });
                </script>
            </div>
        </div>
        <iframe width="70%"  id="codeFrame" name="codeFrame" style="border:0"></iframe>

    </div>
    <div style="clear: both"></div>
    <div id="goBack">
        <button class="btn btn-danger back" onclick="submitAnswer()">提交</button>
    </div>
    <script type="text/javascript" src="js/answer.js"></script>

    <script type="text/javascript">
        var page = 1;
        var orderBy="create_date";
        var questionId= window.location.href.split('=')[1];
        //questionId = "4d896a7fe03a4a65ad0529455d355560";
        var questionInfo = getQuestionInfo(questionId);
        if(questionInfo){
            reply(questionId,page,orderBy,true,questionInfo.courseId);
        }
        function setPage(questionId,pages,current){
            console.log("页面初始化，当前页码"+current);

            $(".pagination").createPage({
                pageCount:pages,
                current:current,
                backFn:function(p){
                    // console.log(p);
//					var classify="0";
                    console.log("页码跳转到："+p);
                    reply(questionId,p,orderBy,true,questionInfo.courseId);
                    if(pages ==0){
                        $(".pagination").css("display","none");
                    }else{
                        $(".pagination").css("display","block");
                    }
                }
            });
        }
        function Show(){
            $("#a").toggle();
            if($("#a").css("display")=="none"){
                codeFrame.window.changeUp();
                $("#codeFrame").width("100%");
            }else {
                codeFrame.window.changeDown();
                $("#codeFrame").width("70%");
            }

        }
        function fullScr(){
            $("#codeFrame").toggle();
            if($("#codeFrame").css("display")=="none"){
                $("#butt").removeClass("glyphicon-fullscreen");
                $("#butt").addClass("glyphicon-resize-small");
                $("#a").width("100%");
            }else {
                $("#butt").addClass("glyphicon-fullscreen");
                $("#butt").removeClass("glyphicon-resize-small");
                $("#a").width("30%");
            }

        }
    </script>
</body>

</html>